<template lang="html">
  <div class="course">
      <div class="month">
        <ul>
            <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
            <li class="arrow">❮</li>
            <li class="year-month">
                <span class="choose-year">{{ currentYear }}年</span>
            </li>
            <li class="arrow">❯</li>
        </ul>
    </div>
     <div class="month">
        <ul>
            <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
            <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
            <li class="year-month">
                <span class="choose-year">{{ currentMonth }}月</span>
            </li>
            <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
        </ul>
    </div>
      <!-- 星期 -->
      <div>
         <ul class="weekdays">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
      </div>
   
     <!-- 日期 -->
     <div>
        <ul class="days">
          <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
          <li v-for="(dayobject,index) in days" :key="index" >
              <!--本月-->
              <!--如果不是本月  改变类名加灰色-->

              <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>
                <!--如果是本月  还需要判断是不是这一天-->
              <router-link tag="span" to="/index/home/specific" v-else>
            <!--今天  同年同月同日-->
                  <span v-if=" dayobject.isSign===true" class="actives">
                    {{ dayobject.day.getDate() }}
                  </span>
                  <span :class="{ colors: Years == currentYear && Months == dayobject.day.getMonth() && Dayss == dayobject.day.getDate() }" @click="dayHandler(dayobject,index)" v-else>{{ dayobject.day.getDate() }}</span>
              </router-link>

          </li>
      </ul>
     </div>
   
  </div>
</template>
<script>
export default {
  name:'dehe',
    data() {
      return {
        currentDay: 1,
        currentMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        arrDate: [10,15],
        item:"",
        Years:"",
        Months:"",
        Dayss:"",
        sss: new Date().getFullYear(),

       // myDate:new Date().getDate()
      }
    },
    created(){
      let that = this
      that.initData(null);
      this.Years = new Date().getFullYear();
      this.Months = new Date().getMonth();
      this.Dayss = new Date().getDate();
    },
    methods:{

        initData: function(cur) {
            var leftcount=0; //存放剩余数量
            var date;
            if (cur) {
                date = new Date(cur);
            } else {
                var now=new Date();
                var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
                d.setDate(42);
                date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            }
            this.currentDay = date.getDate();
            this.currentYear = date.getFullYear();
            this.currentMonth = date.getMonth() + 1;

            this.currentWeek = date.getDay(); // 1...6,0
            if (this.currentWeek == 0) {
                this.currentWeek = 7;
            }
            var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
            this.days.length = 0;
            // 今天是周日，放在第一行第7个位置，前面6个
            //初始化本周
            for (var i = this.currentWeek - 1; i >= 0; i--) {
                var d = new Date(str);
                d.setDate(d.getDate() - i);
                var dayobject={}; //用一个对象包装Date对象  以便为以后预定功能添加属性
                dayobject.day=d;
                this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
            }
            //其他周
            for (var i = 1; i <= 42 - this.currentWeek; i++) {
                var d = new Date(str);
                d.setDate(d.getDate() + i);
                var dayobject={};
                // dayobject.day=d;
                dayobject = {day: d,isSign: this.isVerDate(d.getDate())}
                this.days.push(dayobject);
            }
        },
        isVerDate (v) {
            return this.arrDate.includes(v)
        },
        dayHandler(item,index){
        // 本地存储
            sessionStorage.setItem("year",this.currentYear)
            sessionStorage.setItem("month",this.currentMonth)
            sessionStorage.setItem("day",item.day.getDate())
           // 获取年份和月份
          // this.isColors = index+1;
          console.log(item.day.getDate());

           

        },

        pickPre(year, month) {

            // setDate(0); 上月最后一天
            // setDate(-1); 上月倒数第二天
            // setDate(dx) 参数dx为 上月最后一天的前后dx天
            var d = new Date(this.formatDate(year , month , 1));
            d.setDate(0);
            this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
             
         
        },
        pickNext(year, month) {
            var d = new Date(this.formatDate(year , month , 1));
            d.setDate(42);
            this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
           
        },
            // pickYear: function(year, month) {
            //     alert(year + "," + month);
            // },

            // 返回 类似 2016-01-02 格式的字符串
        formatDate: function(year,month,day){
            var y = year;
            var m = month;
            if(m<10) m = "0" + m;
            var d = day;
            if(d<10) d = "0" + d;
            return y+"-"+m+"-"+d
        }

    }
  }
 
 
  
</script>

<style scoped lang="less">

    .colors{
        border-radius: 50%;
        background: #3DAE95;
        width: 10/100rem;
        padding: 20/100rem;
        box-sizing: border-box;
        color: #fff;
    }

 .month {
            width: 100%;
            background: #fff;
            height: 90/100rem;
        }

        .month ul {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        .year-month {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        

        .choose-year {
            padding-left: 20/100rem;
            padding-right: 20/100rem;
        }

        .choose-month {
            text-align: center;
            font-size: 20/100rem;
        }

        .arrow {
            padding: 30/100rem;
            font-size: 20/100rem;
        }

        .month ul li {
            color: #3DAE95;
            font-size: 40/100rem;
            text-transform: uppercase;
            letter-spacing: 3/50rem;
        }

        .weekdays {
            margin: 0;
            
            background-color: #3DAE95;
            display: flex;
            flex-wrap: wrap;
            height: 90/100rem;
            line-height: 90/100rem;
            color: #FFFFFF;
            justify-content: space-around;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            text-align: center;
            font-size: 30/100rem;
        }

        .days {
            padding: 0;
            background: #FFFFFF;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .days li {
            list-style-type: none;
            display: inline-block;
            width: 14.2%;
            height: 70/100rem;
            text-align: center;
            padding-bottom: 15/100rem;
            padding-top: 15/100rem;
            font-size: 30/100rem;
            color: #000;
        }

        .days li .actives {
            padding: 6/100rem 10/100rem;
            border-radius: 50%;
            // background: #00B8EC;
            // color: #fff;
        }

        .days li .other-month {
            padding: 5/100rem;
            color: gainsboro;
        }

        // .days li:hover {
        //     background: #e1e1e1;
        // }

</style>
